<template>
	<view>
		<!-- 滚动提示 -->
		<tips :tipStr="tipStr"></tips>
		<view class="border-bottom-1">
			<view class="flex flex-align-items padding-x-20 padding-y-20 text-color-h ">
				<text>用户评价 (66)</text>
				<text class="main-text-color" style="margin-left: auto; margin-right: 10rpx;">98%</text>
				<text>满意</text>
			</view>
		</view>
		<view class="param">
			<view
				class="param-item"
				:style="index === tapIndex ? 'background-color: #FD6801; color: #FFFFFF; border-color:#FD6801 ;' : ''"
				v-for="(item, index) in tapList"
				:key="index"
				@tap="changeTap(index)"
			>
				{{ item }}
			</view>
		</view>
		<linex></linex>
		<view class="padding-x-20 margin-y-20" v-for="(item, index) in commentList" :key="index">
			<view class="commnet-content">
				<image class="heardImage" :src="item.heardImage"  mode=""></image>
				<view class="padding-x-20  flex-grow-1">
					<view class="  flex flex-align-items flex-between">
						<view class="">
							<view style="font-size: 30rpx ;font-weight: 600;">
								{{ item.name }}
								<text class="padding-x-10 main-bg-color margin-left-10" style="color: #FFFFFF;border-radius: 50rpx; font-size: 20rpx;">VIP{{ item.vip }}</text>
							</view>
							<uni-rate :max="5" :size="18" :readonly="true" :value="item.rateValue"></uni-rate>
						</view>
						<view class="dianzan" >
							<text class="iconfont icon-service" @tap.stop="chageIfFllow(item)" :style="item.ifFllow ? 'transform: scale(2);color: red; opacity: 0; ' : ''"></text>
							<text class="iconfont icon-service" @tap.stop="chageIfFllow(item)" :style="item.ifFllow ? 'color:red' : ''"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="content-item">
				{{item.content}}
			</view>
			<scroll-view scroll-x style="width: 100%;">
				<view class="flex">
					<view v-for="(image,ind) in item.imageList" :key="'image'+ind">
						<image class=" padding-x-10" :src="image" style="width: 180rpx; height: 180rpx;" @tap="priveImage(ind,item)" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view class="flex justify-between text-color-h flex-align-items">
				<view class="">
					{{item.creatTime}}
				</view>
				<view class="">
					<text class="iconfont icon-dianzan padding-x-20" >1</text>
					<text class="iconfont icon-xiaoxi ">2</text>
				</view>
			</view>
			<linex v-if="index<commentList.length-1"></linex>
			<view v-else class="flex flex-align-items justify-content" style="border-top: 1rpx solid #F1F1F1;">———— 到底了 ————</view>
		</view>
		
		
		<!--
		第一个text
		1:下面的css中将过度设置1秒：transition: 1s;
		2:将2个图标脱离标准流，这样2个图标就能重叠了
		2:transform: scale(3)将元素放大3倍  为什么要用transform呢？而不用width和height宽大3倍？只因为transform不会影响其他元素的位置
		3:颜色是red
		4:设置透明的 opacity: 0
		这样就会随着时间的增加，慢慢的过度到这些效果
		======================================================================================
		第二个text
		因为当点红第一个的时候慢慢的第一个就透明消失了，但是我们点红了啊，这时候就得第二个元素上场了，并设着该元素为红色
		 -->
		<!-- <view class="dian-zan">
			<text class="iconfont icon-service" 
			:style="clazz==1?'transform: scale(3);color: red; opacity: 0; ':''"
			 @tap="changClass"></text>
			<text class="iconfont icon-service" :style="clazz==2?'':'color:red'" @tap="changClass"></text>
		</view> -->
	</view>
</template>

<script>
import tips from '../../componets/commons/tips.vue';
import uniRate from '../../componets/uni-rate/uni-rate.vue';
export default {
	components: {
		tips,
		uniRate
	},
	data() {
		return {
			clazzIndex: -1,
			tipStr: '请勿信任何以领券名义诱导加公众号的欺骗行为，谢谢配合，祝您生活愉快，天天开心',
			tapList: ['全部', '有图', '非常喜欢', '拍照好', '手感帮', '效果好', '性能很棒'],
			tapIndex: 0,
			commentList: [
				{
					heardImage: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoVUKac3iaI5yV54IDicGhSCMQxD5vaXiaJeysBtv44dYynVhibebdKyxB5qf19FPz3iaTODW0PH9AcY4A/132',
					name: '吴永杰',
					ifFllow: false,
					vip: 1,
					rateValue:5,
					"creatTime":"2020-05-30",
					content:"手机非常新,到货之后把之前的顾虑全部打消了,机器是2月14号激活的,使用三个月,性价比非常高,很愉快的一次购物谢谢京东提供的二手平台",
					"imageList":[
						"https://jffy.oss-cn-shanghai.aliyuncs.com/bb91cf26-f05f-4e14-9eac-644f22b6069b.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/a502c95e-e453-4a23-9ed3-b79e50f43eac.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/75b3ee08-49a4-4c2a-838d-3d4b2f17b6bc.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/b13f4148-836a-4edf-adf7-7a803e80f99b.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg"
					]
				},
				{
					heardImage: 'https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447979813.jpg',
					name: '吴永杰',
					ifFllow: true,
					vip: 1,
					rateValue:2,
					"creatTime":"2020-05-30",
					content:"手机非常新,到货之后把之前的顾虑全部打消了,机器是2月14号激活的,使用三个月,性价比非常高,很愉快的一次购物谢谢京东提供的二手平台",
					"imageList":[
						"https://jffy.oss-cn-shanghai.aliyuncs.com/b13f4148-836a-4edf-adf7-7a803e80f99b.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg"
					]
				},
				{
					heardImage: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoVUKac3iaI5yV54IDicGhSCMQxD5vaXiaJeysBtv44dYynVhibebdKyxB5qf19FPz3iaTODW0PH9AcY4A/132',
					name: '吴永杰',
					ifFllow: false,
					vip: 1,
					rateValue:5,
					"creatTime":"2020-05-30",
					content:"手机非常新,到货之后把之前的顾虑全部打消了,机器是2月14号激活的,使用三个月,性价比非常高,很愉快的一次购物谢谢京东提供的二手平台",
					"imageList":[
						"https://jffy.oss-cn-shanghai.aliyuncs.com/bb91cf26-f05f-4e14-9eac-644f22b6069b.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/a502c95e-e453-4a23-9ed3-b79e50f43eac.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/75b3ee08-49a4-4c2a-838d-3d4b2f17b6bc.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/b13f4148-836a-4edf-adf7-7a803e80f99b.jpg",
						"https://jffy.oss-cn-shanghai.aliyuncs.com/6825e0ed-272b-47bb-b945-aea52e15013c.jpg"
					]
				}
			]
		};
	},

	methods: {
		// 预览图片
		priveImage(ind,item){
			uni.previewImage({
				current:ind,
				urls:item.imageList
			})
		},
		changClass() {
			this.clazz = this.clazz == 1 ? 2 : 1;
			console.log(this.clazz);
		},
		changeTap(index) {
			this.tapIndex = index;
		},
		chageIfFllow(item) {
			item.ifFllow = !item.ifFllow;
		}
	}
};
</script>

<style lang="less">
.param {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	margin: 20rpx;
}
.param-item {
	padding: 5rpx 15rpx;
	margin: 10rpx 10rpx;
	border: 1rpx solid #999999;
	border-radius: 5rpx;
	color: #999999;
}

//---------------------红心--------------------------------------
.dianzan {
	position: relative;
	
	.icon-service {
		color: #cccccc;
		font-size: 40rpx;
		// absolute让心相对定位，能使得两个红心重叠起来
		position: absolute;
		top: 0;
		right: 0;
		
		transition: 1s;
	}
}


//-------------------------评论内容-------------------------
.commnet-content{
	//  padding flex flex-align-items
	
	display: flex;
	.heardImage{
		width: 100rpx;
		height: 100rpx;
		border-radius:100rpx ;
		/**
		 *1注意：这里就能体现出来这个属性的重要性了，页面的左边是图片，右边是内容，由于左右是flex布局。当内容太多的时候就会挤压图片
		        导致图片变形，此时图片就应该设置为flex-shrink:0;
		 2讲解：
		        flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
		        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
		        负值对该属性无效。
		 */
		flex-shrink:0;
		
	}
	
}

// .dian-zan {
// 	position: relative;
// 	.icon-xihuan {
// 		font-size: 30rpx;
// 		// 元素绝对定位，这样两个红心脱离标准流，那么就会完全重叠在一起了
// 		position: absolute;
// 		transition: 1s;
// 		color: #CCCCCC;
// 	}
// }
</style>
